<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-22 14:06:16
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--缓存几何-->
<template>
	<div id="three_container"></div>
	<el-button class="downLoadBtn" ref="downLoadBtn" @click="saveFile"
		>下载</el-button
	>
</template>

<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";

import { AxesHelper } from "../case/helper/AxesHelper";
//-
import { initContainer } from "../js/init";

// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

let scene, renderer, camera;
onMounted(() => {
	let container = document.getElementById("three_container");
	let instances = initContainer(THREE, container);
	scene = instances.scene;
	renderer = instances.renderer;
	camera = instances.camera;
	AxesHelper(THREE, scene);
	demo();
});
const demo = () => {
	// 创建GLTF加载器对象
	const loader = new GLTFLoader();

	/**
	 * 渲染器和前端UI界面
	 */
};

/**
 * 下载图片
 */
const downLoadBtn = ref(null);
const saveFile = () => {
	console.log(downLoadBtn, "downLoadBtn");
	const link = document.createElement("a");
	const canvas = renderer.domElement;
	link.href = canvas.toDataURL("image/png");
	link.download = "threejs.png";
	link.click();
};
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
.downLoadBtn {
	position: absolute;
	right: 0;
	top: 10px;
	z-index: 99;
}
</style>
